<template>
  <el-upload :action="fileUrl" :show-file-list="false" :on-success="uploadSuccess"
             list-type="picture-card" :headers="headers">
    <img v-if="model" :src="model" class="avatar" alt="图片">
    <el-icon v-else>
      <Plus/>
    </el-icon>
  </el-upload>
</template>

<script setup>
import tool from "@/utils/tool";
import config from "@/config";
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import {Plus} from "@element-plus/icons-vue";

const model = defineModel()
const fileUrl=ref(config.REMOTE_URL+ "/oss/upload")
const headers=ref({})
onMounted(()=>{
  let sessionId = tool.data.get("sessionId");
  if (sessionId) {
    headers.value[config.TOKEN_NAME] = sessionId
  }
})
const uploadSuccess=(res)=>{
  if (res.code!==200){
    ElMessage.error(res.msg)
  }
  model.value= res.data.url;
}

</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 64px;
  height: 64px;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader input[type="file"] {
  display: none;
}

.el-upload--picture-card {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 64px;
  height: 64px;
  line-height: 64px;
  vertical-align: top;
}

.el-upload--picture-card i {
  font-size: 18px;
}

.el-upload--picture-card input {
  display: none;
}

.el-upload-list--picture-card .el-upload-list__item {
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 64px;
  height: 64px;
  margin: 0 8px 8px 0;
  display: inline-block;
}

.el-upload-list--picture-card .el-upload-list__item-actions span + span {
  margin-left: 10px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 20px;
  color: #8c939d;
  width: 100%;
  height: 100%;
  line-height: 62px;
  text-align: center;
}

.avatar {
  width: 100%;
  height: 100%;
  display: block;
}

.el-card__body img {
  width: 100%;
}

.el-card {
  margin: 10px 0px;
}

.card {
  position: relative;
}

.card:hover .state {
  display: flex;

}

.card .state {
  display: none;
  flex-direction: row;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  position: absolute;
  left: 0px;
  top: 0px;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 10px;
}
</style>
